<div class="tool <%= tweet_tool_classes -%>" id="tweet-tool"
     data-tweet-targets="<%= @tweet.targets.to_json(only: :twitter_id, methods: :image_url) %>"
     data-tweet-message="<%= @tweet.message %>"
     data-tweet-related="<%= Rails.application.config.twitter_related.to_a.join(",") %>">
  <div class="tool-container">
    <div class="tool-heading"><h3 class="tool-title"><%= @tweet.cta -%></h3></div>
    <div class="tool-body">
      <div id="tweet-message-wrapper"<%= %( style="display: none").html_safe if @tweet.target_congress? %>>
        <textarea class="form-control"><%= @tweet.message.html_safe -%></textarea>
      </div>

      <% if @tweet.targets.present? %>
        <div id="tweet-tool-container"<%= %( style="display: none").html_safe if @tweet.target_congress? %>>
          <h3 class="twitter-tool-label"><em>Individuals</em></h3>
          <% initial_targets = @tweet.targets.sample(3) %>
          <% @tweet.targets.each do |target| %>
            <div class="tweet-individual"<%= %( style="display: none").html_safe unless initial_targets.include?(target) %>>
              <% if target.image_url.present? %>
                <img src="<%= target.image_url %>" class="individual">
              <% end %>

              <%= link_to "https://twitter.com/intent/tweet?" + {status: ".@#{target.twitter_id} #{@tweet.message}", related: Rails.application.config.twitter_related.to_a.join(',')}.to_query, :target => "_blank", :class => "btn btn-default btn-tweet individual", :"data-twitter-id" => target.twitter_id do %>
                <i class="icon-twitter-1"></i> Tweet <%= target.twitter_id %>
              <% end %>
            </div>
          <% end %>

          <% if @tweet.targets.size > 3 %>
            <button class="btn btn-success btn-sm tweet-refresh"><i class="icon-loop"></i> Display another 3</button>
          <% end %>
        </div>
      <% end %>

      <% if @tweet.target_congress? %>
        <div class="with-js">
          <h3 class="twitter-tool-label" style="display: none"><em>Your Representatives</em></h3>
          <form class="tweet-tool validate" action="">
            <div class="form-group">
              <label for="street_address">Street address</label>
              <input class="form-control" type=text id="street_address" required>
            </div>
            <div class="form-group">
              <label for="zipcode">Zip Code</label>
              <input class="form-control" type=text name="zipcode" id="zipcode" required>
            </div>
            <%= render "tools/save_my_info_option", info: %w[address zipcode] -%>
            <input type=submit class="btn action" value="Look up your reps">
            <%= render "tools/loading" -%>
          </form>
        </div>
        <div class="without-js">
          <h4><strong>Our representative lookup tool requires javascript.</strong></h4>
          <p>If your browser doesn't support javascript or you prefer not to enable javascript on this site, you can find your legislators' contact information via the <a target="_blank" href="http://www.house.gov/representatives/find/">House</a> and <a target="_blank" href="https://www.senate.gov/general/contact_information/senators_cfm.cfm">Senate</a> websites.</p>
          <p>The tweet for this campaign is:</p>
          <textarea class="form-control"><%= @tweet.message.html_safe -%></textarea>
        </div>
      <% end -%>
    </div>

    <input type="hidden" name="action-id" value="<%= @actionPage.id -%>">
  </div>

  <% if @tweet.target_congress? && !@reps.present? -%>
    <p class="privacy-notice with-js">
      This tool uses <a href="http://smartystreets.com/legal/privacy-policy" target="_blank">Smarty Streets</a>' API.
    (<a class="privacy-notice-popover" href="#"
      data-container="body"
      data-toggle="popover"
      data-title="Tweet Tool APIs"
      data-html="true"
      data-trigger="hover"
      data-placement="auto"
      data-content="<p>Our &quot;Tweet Your Representatives&quot; tool uses Smarty Streets' API to convert your street address and zip code to a congressional district.</p><p>This information isn't stored unless you're logged in.</p>"
      >why?</a>).<br>
      If you prefer not to use our tweet tool, <a href="https://www.eff.org/congress"  target="_blank">click here</a>.</p>
  <% end -%>

  <% unless current_user %>
    <%= form_for :subscription, url: subscriptions_path, remote: true, html: { class: "newsletter-subscription" } do |f| %>
      <hr />
      <%= t :sign_up_for_mailings_from %> <b><%= t :organization_abbreviation %></b>?

      <fieldset>
        <%= f.email_field :email, class: "form-control", placeholder: "Email", required: "email", "aria-label": "Email" %>
      </fieldset>

      <%= render "tools/petition_location", f: f %>

      <%= render "tools/privacy_notice" %>

      <%= f.submit "Sign up", class: "btn btn-primary action" %>
    <% end %>
  <% end %>
</div>
